<template>
    <el-drawer v-model="isShow" :title="title" :destroy-on-close="true" size="50%" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <!-- <el-dialog v-model="isShow" size="50%" :destroy-on-close="true" @close="closeHandle"> -->
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>

        <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="案例编号" required prop="caseCode">
                        <el-input v-model="form.caseCode" placeholder="请输入案例编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="案例名称" required prop="caseName">
                        <el-input v-model="form.caseName" placeholder="请输入案例名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="单位" required prop="unitId">
                        <el-tree-select v-model="form.unitId" :data="deptOptions" default-expand-all
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId"
                            placeholder="选择上级部门" check-strictly @node-click="deptNameClick"
                            :disabled="isButtonDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门" required prop="deptId">
                        <el-tree-select v-model="form.deptId" :data="department" default-expand-all
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId"
                            placeholder="选择上级部门" check-strictly @node-click="deptNameClick"
                            :disabled="isButtonDisabled" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="状态" required>
                        <el-radio-group v-model="form.state" disabled="true">
                            <el-radio v-for="(item, index) in nj_casebuild_state" :key="'state' + index"
                                :value="item.value">{{
                                    item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="关键词" required prop="keyword">
                        <el-input v-model="form.keyword" placeholder="请输入关键词" />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="要旨" required prop="gist">
                        <el-input type="textarea" v-model="form.gist" style="width: 100%" :rows="4" resize="none" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="基本案情" required prop="caseInfo">
                        <el-input type="textarea" v-model="form.caseInfo" style="width: 100%" :rows="4" resize="none" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="检察机关履职过程" required prop="process">
                        <el-input type="textarea" v-model="form.process" style="width: 100%" :rows="4" resize="none" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="指导意义" required prop="significance">
                        <el-input type="textarea" v-model="form.significance" style="width: 100%" :rows="4"
                            resize="none" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitHandle(1)" v-show="showfabu">发布</el-button>
            <el-button type="primary" @click="submitHandle(0)" v-show="showfabu">草稿</el-button>
            <el-button @click="cancel">关闭</el-button>
        </template>
        <!-- </el-dialog> -->
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { createCaseBuild, editCaseBuild, getCaseBuildInfo, getCaseBuildList } from "@/api/CaseBuild/CaseBuild";
import { listDept, } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";
// import { getPoliceAreaList, } from "@/api/PoliceAreaManage/PoliceAreaManage";

const { proxy } = getCurrentInstance()
const { nj_casebuild_state } = proxy.useDict('nj_casebuild_state')
// 是否显示抽屉
const isShow = ref(false)
// 抽屉标题
const title = ref('')
// 部门
const department = ref([])
// 所属单位
const deptOptions = ref([]);

// 通知事件
const emit = defineEmits(['getCaseBuildList'])

const rules = {
    caseCode: [{ required: true, message: "案例编号不能为空", trigger: "blur" }],
    caseName: [{ required: true, message: "案例名称不能为空", trigger: "blur" }],
    keyword: [{ required: true, message: "关键词不能为空", trigger: "blur" }],
    gist: [{ required: true, message: "要旨不能为空", trigger: "blur" }],
    caseInfo: [{ required: true, message: "基本案情不能为空", trigger: "blur" }],
    process: [{ required: true, message: "检察机关履职过程不能为空", trigger: "blur" }],
    significance: [{ required: true, message: "指导意义不能为空", trigger: "blur" }]
}

// 案例
const form = ref({
    caseCode: undefined,
    caseName: undefined,
    keyword: undefined,
    unitId: undefined,
    depId: undefined,
    gist: undefined,
    caseInfo: undefined,
    process: undefined,
    significance: undefined,
    state: undefined,
    createTime: "2020-12-12 13:12:33",
    adddate: "2020-12-12 13:12:33",
    updatedate: "2020-12-12 13:12:33",
})


const deptqueryParams = ref({
    status: undefined,
})
const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const isButtonDisabled = ref(false);
const showfabu = ref(false);
// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        form.value.unitId = res.data.unitId;
        form.value.deptId = res.data.deptId;
    })
}

// 添加案例
const showAddDrawer = () => {
    title.value = '添加案例';
    showfabu.value = true;
    isButtonDisabled.value = true;
    reset();
    getUserInfo();//找当前登录用户所在部门    
    getDepartment();
    changeShowStatus();
}

// 修改案例
const showEditDrawer = async (data) => {
    title.value = '修改案例'
    isButtonDisabled.value = true;
    reset();

    getDepartment();

    await getCaseBuildInfo(data.caseId).then(res => {
        form.value = res.data;
        form.value.unitId = Number(res.data.unitId);
        form.value.deptId = Number(res.data.depId);

        if (form.value.state === '1') {
            showfabu.value = false;
        }
        else {
            showfabu.value = true;
        }
    })
    changeShowStatus();

}

defineExpose({ showAddDrawer, showEditDrawer })

// 表格属性
const Areapaging = ref({
    pageNum: 1,// 页码
    pageSize: 9999// 分页数量
})


//获取单位（部门）列表
const getDepartment = async () => {
    await listDept(deptqueryParams.value).then(res => {
        deptOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
    })
    await listDept(deptqueryParams.value).then(res => {
        department.value = res.data.filter(
            item => item.isUnit === false
        );
        department.value = proxy.handleTree(department.value, "deptId");
    })
}

/** 节点单击事件 */
function deptNameClick(data) {
    form.value.policeareaId = "";
};

onMounted(() => {
    // getDepartment()
    getUserInfo()
})
const submitHandle = (state) => {
    // 必输校验--标签<el-form :model="form" label-width="auto" ref="formRef"  :rules="rules"> 添加ref="formRef" 属性 :rules="rules"绑定
    // 然后const rules = {里面是需要的rules}   在每个<el-form-item label="房间编号" required prop="对应字段">加上 prop="对应的字段"
    // submitHandle的时候先判断    proxy.$refs["formRef"].validate(valid => {
    // if (valid) {  valid true面执行具体代码逻辑     });}

    form.value.state = state;
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value['caseId']) {
                editCaseBuild(form.value).then(res => {
                    changeShowStatus()
                    emit('getCaseBuildList', '来了老弟')
                })
            } else {
                // console.log(form.value);
                createCaseBuild(form.value).then(res => {
                    changeShowStatus()
                    emit('getCaseBuildList', '来了老弟')
                })
            }
        }

    });
}

// 关闭后的回调事件
const closeHandle = () => {
    // form.value = defaultQuery
    reset();
}
/** 重置操作表单 */
function reset() {
    form.value = {
        caseCode: undefined,
        caseName: undefined,
        keyword: undefined,
        unitId: undefined,
        depId: undefined,
        gist: undefined,
        caseInfo: undefined,
        process: undefined,
        significance: undefined,
        state: '0',
        createTime: "2020-12-12 13:12:33",
        adddate: "2020-12-12 13:12:33",
        updatedate: "2020-12-12 13:12:33",
    };
    proxy.resetForm("formRef");
};
/** 取消按钮 */
const cancel = () => {
    isShow.value = false
    reset();
}
</script>

<style lang="scss" scoped>
h4 {
    margin: 10px 0;
}
</style>